<div id="maskOptionDiv" class="mask-option-div" style="display: none;" onclick="closeOption()"></div>

<script type="text/javascript">
	var scrollTop = '', scrollflag = '';
	var optionIndex = '0';
	function showOption(index) {
		var elements = document.querySelectorAll('[id^="optionItemFloatDiv"]');
		for (var i = 0; i < elements.length; i++) {
			elements[i].style.display = 'none';
		}
	    setDisplay('maskOptionDiv', 'none');

	    if (index == optionIndex) {
	        optionIndex = '0';

	        setClass('optionItemText' + index, 'option-item-text');
	        getItem('optionItemimg' + index).src = 'static/pic/app/option_down.png';

	        isBodyScroll('yes');
	        return;
	    }
	    else {
	        if (optionIndex != '0') {
	            setClass('optionItemText' + optionIndex, 'option-item-text');
	            getItem('optionItemimg' + optionIndex).src = 'static/pic/app/option_down.png';
	        }

	        setClass('optionItemText' + index, 'option-item-text-click');
	        getItem('optionItemimg' + index).src = 'static/pic/app/option_up.png';
	        optionIndex = index;
	    }

	    setDisplay('optionItemFloatDiv' + index, '');
	    setDisplay('maskOptionDiv', '');
	    isBodyScroll('no');
	}

	function closeOption() {
	    showOption(optionIndex);
	}

	function isBodyScroll(flag) {
	    if (scrollflag == flag) {
	        return;
	    }

	    if (flag == 'yes') {
	        document.body.style.position = '';
	        document.body.style.width = '';
	        document.body.style.top = '';
	        window.scrollTo(0, scrollTop);
	    }
	    else {
	        scrollTop = window.scrollY;
	        document.body.style.position = 'fixed';
	        document.body.style.width = '100%';
	        document.body.style.top = -scrollTop + 'px';
	    }
	    scrollflag = flag;
	}

	function loadOptionsItem(htmlId, valueId, list, allText = '') {
        var html = '';
        if (allText != '') {
        	html = '<div class="select-item" onclick="selectOption(this, \'\', \'' + valueId + '\', \'' + allText + '\')">';
	        html += '<div class="select-text-click">全部</div>';
	        html += '<img class="select-img" src="static/pic/app/option_click.png" />';
	        html += '</div>';
        }

        for (var i = 0; i < list.length; i++) {
            html += '<div class="select-item" onclick="selectOption(this, \'' + list[i].value + '\', \'' + valueId + '\', \'已选(1)\')">';
            html += '<div class="select-text">' + list[i].text + '</div>';
            html += '<img class="select-img" src="static/pic/app/option_click.png" style="display: none;" />';
            html += '</div>';
        }
        setHtml(htmlId, html);
	}

	function loadOptionsItem2(htmlId, valueId, list, allText = '') {
        var html = '';
        if (allText != '') {
        	html = '<div class="select-item" onclick="selectOption(this, \'\', \'' + valueId + '\', \'' + allText + '\')">';
	        html += '<div class="select-text-click">全部</div>';
	        html += '<img class="select-img" src="static/pic/app/option_click.png" />';
	        html += '</div>';
        }

        for (var i = 0; i < list.length; i++) {
            html += '<div class="select-item" onclick="selectOption(this, \'' + list[i].value + '\', \'' + valueId + '\', \'' + list[i].text + '\')">';
            html += '<div class="select-text">' + list[i].text + '</div>';
            html += '<img class="select-img" src="static/pic/app/option_click.png" style="display: none;" />';
            html += '</div>';
        }
        setHtml(htmlId, html);
	}

	function selectOption(obj, text, id, title) {
	    var textObj = obj.getElementsByTagName('div')[0];
	    var imgObj = obj.getElementsByTagName('img')[0];
	    if (textObj.className == 'select-text-click') {
	        return;
	    }

	    var parentObj = obj.parentNode;
	    var objList = parentObj.children;
	    for (var i = 0; i < objList.length; i++) {
	        objList[i].getElementsByTagName('div')[0].className = 'select-text';
	        objList[i].getElementsByTagName('img')[0].style.display = 'none';
	    }

	    textObj.className = 'select-text-click';
	    imgObj.style.display = '';

	    setValue(id, text);

	    setHtml('optionItemText' + optionIndex, title);
	    closeOption();

	    queryKey('ok');
	}
</script>

<style type="text/css">
	.condition-bar
	{
	    width: 100%;
	    position: fixed;
	    top: 0;
	    z-index: 100;
	}

	.option-bar
	{
	    width: 100%;
	    height: 80px;
	    background-color: white;
	    border-bottom: 1px solid #E4E4E4;
	    display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: stretch;
	}

	.option-item
	{
	    -webkit-flex: 1;
	    height: 80px;
	    line-height: 80px;
	    background-color: white;
	    font-size: 28px;
	    color: #333333;
	    text-align: center;
	}

	.option-item-text
	{
	    color: #333333;
	}

	.option-item-text-click
	{
	    color: #21A0F7;
	}

	.option-item-img
	{
	    width: 20px;
	    height: 20px;
	}

	.option-more
	{
	    -webkit-flex: none;
	    width: 110px;
	    height: 80px;
	    background-color: white;
	    border-left: 2px solid #E4E4E4;
	    display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: center;
	    text-align: center;
	}

	.option-more-img
	{
	    -webkit-flex: none;
	    margin: 0 auto;
	    width: 48px;
	    display: block;
	}

	.option-more-num
	{
	    width: 30px;
	    height: 30px;
	    line-height: 30px;
	    top: 0;
	    right: 0;
	    margin-top: 6px;
	    margin-right: 20px;
	    color: white;
	    font-size: 20px;
	    text-align: center;
	    background-color: red;
	    position: absolute;
	    -webkit-border-radius: 50%;
	}

	.condition-empty-area
	{
	    height: 80px;
	    background-color: #F2F2F2;
	}

	.select-item
	{
	    height: 100px;
	    font-size: 0;
	    border-bottom: 1px solid #E4E4E4;
	}

	.select-text, .select-text-click
	{
	    height: 100px;
	    line-height: 100px;
	    color: #333333;
	    font-size: 30px;
	    text-align: left;
	    margin-left: 50px;
	    display: inline-block;
	}

	.select-text-click
	{
	    color: #21A0F7;
	}

	.select-img
	{
	    height: 28px;
	    margin-top: 36px;
	    margin-right: 40px;
	    vertical-align: top;
	    display: inline-block;
	    float: right;
	}

	.option-button-bar
	{
	    width: 100%;
	    height: 100px;
	    display:-webkit-flex;
	    -webkit-flex-direction:row;
	    -webkit-align-items:stretch;
	}

	.option-button
	{
	    -webkit-flex: none;
	    width: 180px;
	    font-size: 28px;
	    height: 100px;
	    line-height: 100px;
	    color: #333333;
	    text-align: center;
	    border-top: 1px solid #D7D7D7;
	    background-color: white;
	}

	.option-button1
	{
	    -webkit-flex: auto;
	    font-size: 32px;
	    height: 100px;
	    line-height: 100px;
	    color: white;
	    text-align: center;
	    border-top: 1px solid #D7D7D7;
	    background-color: #21A0F7;
	}

	.option-title
	{
	    font-size: 30px;
	    color: #333333;
	    text-align: left;
	    margin-left: 20px;
	    margin-top: 40px;
	}

	.option-title2
	{
	    font-size: 30px;
	    color: #333333;
	    text-align: left;
	    margin-left: 20px;
	    margin-top: 55px;
	}

	.option-select, .option-selected
	{
	    width: 21.5%;
	    height: 70px;
	    line-height: 70px;
	    margin-top: 20px;
	    margin-left: 20px;
	    background-color: #E4E4E4;
	    border: 1px solid #E4E4E4;
	    font-size: 26px;
	    color: #333333;
	    text-align: center;
	    display: inline-block;
	}

	.option-selected
	{
	    color: #21A0F7;
	    background-color: #d6ecfb;
	    border: 1px solid #21A0F7;
	}

	.mask-option-div
	{
		width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0px;
	    left: 0px;
	    background-color: rgba(0, 0, 0, 0.5);
	    z-index: 99;
	}
</style>